<template>
    <div >
        <a-row>
            <div class="ant-breadcrumb">
                <!-- style="float: right;" -->
                <a-space  class="space_item" >
                    <a-button   class="dashed_none" size="small" @click="e=>{get_files()}"><a-icon type="sync" :spin="loading_files" />刷新</a-button>
                    <a-button   class="dashed_none" size="small" @click="e=>{enable_all_selects()}" :disabled="myfile_data.data.length==0"><a-icon type="check-square"  />全部选择</a-button>
                    <a-button   class="dashed_none" size="small" @click="e=>{cancle_all_selects()}" :disabled="selected_myfile_data_keys.length==0"><a-icon type="close"  />取消全部选择</a-button>
                    <a-button   class="dashed_none" size="small" :disabled="selected_myfile_data_keys.length==0"  @click="e=>{get_batch_download_url()}" ><a-icon type="download" />下载</a-button>
                    <a target="_blank" v-show="false" ref="single_download_a">下载文件</a>
                </a-space>
            </div>
        </a-row>
        <a-divider />
        <a-row>
            <a-table 
                :columns="myfile_columns" 
                :data-source="myfile_data.data"
                :customRow="myfile_customRow"
                :row-selection="rowSelection"
                :pagination="myfile_pagination"
                size="small"
                class="myfile-table"
                :loading="loading_files"
                bordered
                rowKey="_id"
                >
                <template slot="name" slot-scope="text, record">
                    <div >
                        <a-space  class="space_item" style="width: 100%;">
                            <a-icon type="file" theme="twoTone" v-show="record.fstype=='file'"/>
                            <a-icon type="folder" theme="twoTone" v-show="record.fstype=='dir'"/>
                            <div v-if="record.editable==true" >
                                <a-space  class="space_item">
                                    <a-input 
                                        v-if="record.editable"
                                        :value="record.name"
                                        @change="e => editable_change(e.target.value, record)"
                                    />
                                    <a-button type="link" @click="e => editable_ok(record)">确定</a-button>
                                </a-space>
                            </div>
                            <div v-else >
                                {{ record.name }}
                            </div>
                        </a-space>
                    </div>
                </template>
                <template slot="username" slot-scope="text, record">
                    {{record.username}}
                </template>
                <template slot="size" slot-scope="text, record">
                    {{FormatFileSize(record.size)}}
                </template>
                <template slot="shared" slot-scope="text, record">
                    {{record.shared?"是":"否"}}
                </template>
                <template slot="downcount" slot-scope="text, record">
                    {{record.downcount?record.downcount:0}}
                </template>

                
            </a-table>
        
        </a-row>
    </div>
</template>
<script>
    const myfile_columns = [
        {
            dataIndex: 'name',
            //key: '_id',
            title: '文件名称',
            scopedSlots: { customRender: 'name' } ,
            width:300,
            align:'left'
        },
        {
            title: '共享者',
            scopedSlots: { customRender: 'username' } ,
            width:200,
            align:'center'
        },
        {
            title: '大小',
            scopedSlots: { customRender: 'size' } ,
            width:200,
            align:'center'
        },
        {
            title: '是否共享',
            scopedSlots: { customRender: 'shared' } ,
            width:80,
            align:'center'
        },
        {
            title: '下载次数',
            scopedSlots: { customRender: 'downcount' } ,
            width:80,
            align:'center'
        },
    ];
    export default {
        data() {
            return {
                myfile_columns:myfile_columns,
                myfile_pagination:{
                    size:'small',
                    pageSize:10,
                    showTotal:(total, range)=>{
                        return `共 ${total} 个，当前${range[0]}-${range[1]}`
                    }
                },
                myfile_data: {
                    data:[]
                },
                selected_myfile_datas:[],
                selected_myfile_data_keys:[],
                myfile_customRow: (record, index) => ({
                    on: {
                        contextmenu: (event) => {
                            this.selected_myfile_data_keys=[record.key]
                            this.onContextmenu(event,record, index)//方法
                            event.preventDefault();
                        },
                    }
                }),
                loading_files:false,
                single_download_a_el:"",
            }
        },
        beforeUnmount() {
            this.$mitt.off('tab_change_4');
        },
        mounted() {
            this.$nextTick(()=>{
                this.single_download_a_el=this.$refs.single_download_a
            })
            this.$mitt.on("tab_change_4",(_tab_index)=>{
                this.get_files()
            })
            this.get_files() 
        },
        computed: {
            rowSelection(){
                return {
                    selectedRowKeys:this.selected_myfile_data_keys,
                    onChange: (selectedRowKeys, selectedRows) => {
                        this.selected_myfile_datas=selectedRows
                        this.selected_myfile_data_keys=selectedRowKeys
                    },
                }
            },
        },
        methods:{
            enable_all_selects(){
                this.selected_myfile_data_keys=[]
                this.selected_myfile_datas=[]
                this.myfile_data.data.forEach( (_file )=> {
                    this.selected_myfile_data_keys.push(_file["_id"])
                    this.selected_myfile_datas.push(_file)
                    
                });
            },
            cancle_all_selects(){
                this.selected_myfile_data_keys=[]
            },
            onContextmenu(event,record,index) {//row的右键
                let _downfile=this.Get_download_file(record.userid,record.pre_dir,record.name)
                // //添加下载记录
                this.single_download_url=_downfile
                this.single_download_a_el.setAttribute("href",_downfile);
                this.single_download_a_el.setAttribute("download",_downfile);
                this.$contextmenu({
                    items: [
                        {
                            label: "下载",
                            disabled: record.fstype=='dir',
                            icon: "anticon-download anticon",
                            divided: true,
                            onClick: () => {
                                this.get_download_url(record)
                            }
                        },
                    ],
                    event,
                    customClass: "custom-class",
                    zIndex: 3,
                });
                return false;
            },
            share_Confirm(records,share=true){
                let _ids=[]
                records.forEach((record)=>{
                    _ids.push(record["_id"])
                })
                let data={
                    shared:share,
                    ids:_ids.join(','),
                }
                let that=this;
                this.$confirm({
                    title: `你是否需要${share?'共享':'取消共享'}选择的文件?`,
                    content: `当你选择确定后,其他人${share?'':'不再'}能够访问并下载您共享的文件。`,
                    cancelText:"取消",
                    okText:"确定",
                    onOk() {
                        return that.share_ajax(data)
                    },
                    onCancel() {},
                });
            },
            share_ajax(data){
                return new Promise((resolve, reject) => {
                    this.$common_apis.axios_post("/change_file?",data,true)
                    .then(_result => {
                        if(_result){
                            resolve()
                            this.$message.success("共享状态更新成功")
                            this.get_files()
                        }
                        else{
                            reject()
                            this.$message.success("共享状态更新失败")
                        }
                    });
                }).catch(() => this.$message.success("共享状态更新失败"));

            },
            get_files(_path){
                this.loading_files=true
                this.myfile_data.data=[]
                this.$common_apis.axios_get("/get_share_files?",{
                    pagesize:1000
                    },true)
                .then(_result => {
                    this.loading_files=false
                    if(_result){
                        let _files=[]
                        _result.data.forEach( (_file,index )=> {
                            _file.key=_file["_id"]
                            _files.push(_file)
                        });
                        this.myfile_data.data=_files
                        this.$forceUpdate()
                    }
                });
            },
            get_download_url(){
                this.single_download_a_el.click();
            },
            get_batch_download_url(){
                let name="select_files_download.txt";
                let values=[];
                let length= this.selected_myfile_datas
                this.selected_myfile_datas.forEach( (_file,_index )=> {
                    let _downfile=this.Get_download_file(_file.userid,_file.pre_dir,_file.name)
                    if(_index!=length-1){
                        _downfile=_downfile+"\r\n"
                    }
                    values.push(_downfile)
                });
                let blob=new Blob(values, {type: "text/latex"});
                let URL = window.URL || window.webkitURL;
                this.single_download_a_el.setAttribute("href",URL.createObjectURL(blob));
                this.single_download_a_el.setAttribute("download",name);
                this.single_download_a_el.click();
            },
        }
  }
</script>
<style>
.myfile-table .ant-pagination{
    margin-top: 50px;
}
</style>